<!DOCTYPE html>
<html>
<head>
	<title>图片裁剪</title>
	<link href="css/css/bootstrap.min.css" rel="stylesheet">
  	<link href="css/cropper.css" rel="stylesheet">
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/cropper.js"></script>
</head>
<body>
	<div class="img-container">
		<img src="">
	</div>
	<input type="button" id="tailor" value="点击裁剪" name="">
</body>
<script>
	var $image = $('.img-container > img');
    src="img/picture.jpg";
	$image.attr("src", src);    

	$image.on("load", function() {        // 等待图片加载成功后，才进行图片的裁剪功能
	    $image.cropper({
	        aspectRatio: 1 / 1　　// 1：1的比例进行裁剪，可以是任意比例，自己调整
	    });
	})      
	
	//点击裁剪
	$("#tailor").on("click", function() {
	
	    var src = $image.eq(0).attr("src");
	    var canvasdata = $image.cropper("getCanvasData");
	    // console.log(canvasdata);return false;
	    var cropBoxData = $image.cropper('getCropBoxData');
	    console.log(canvasdata);
	    convertToData(src, canvasdata , cropBoxData, function(basechar) {
	        console.log(basechar);
	    });
	})
	
	function convertToData(url, canvasdata, cropdata, callback) {
	    var cropw = cropdata.width; // 剪切的宽
	    var croph = cropdata.height; // 剪切的宽
	    var imgw = canvasdata.width; // 图片缩放或则放大后的高
	    var imgh = canvasdata.height; // 图片缩放或则放大后的高
	    
	    var poleft = canvasdata.left - cropdata.left; // canvas定位图片的左边位置
	    var potop = canvasdata.top - cropdata.top; // canvas定位图片的上边位置
	    
	    var canvas = document.createElement("canvas");
	    var ctx = canvas.getContext('2d');
	    
	    canvas.width = cropw;
	    canvas.height = croph;
	    
	    var img = new Image();
	    img.src = url;
	    img.setAttribute('crossOrigin','anonymous');
	    img.onload = function() {
	        this.width = imgw;
	        this.height = imgh;
	        
	            // 这里主要是懂得canvas与图片的裁剪之间的关系位置
	        ctx.drawImage(this, poleft, potop, this.width, this.height);
	        var base64 = canvas.toDataURL('image/jpg', 1);  // 这里的“1”是指的是处理图片的清晰度（0-1）之间，当然越小图片越模糊，处理后的图片大小也就越小
	        callback && callback(base64)      // 回调base64字符串
	    }
	}    



</script>
</html>